<template>
	<view>
		<u-swiper :show="false" :list="bannerList" height="750" :border-radius="0"></u-swiper>
		<view class="m-box-view"  :style="{height: getBoxViewHeight}">
			<view class="m-box" :style="{height: getBoxHeight}">
				<view class="m-tab">
					<view class="m-tab-item" @click="tabClickFun(item,index)"
						:class="[index == current ? 'm-tab-active'+index : '']" v-for="(item,index) in tabList"
						:key="index">
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="m-box-body">
					<view class="m-box-tip" v-if="address && _city == vuexCity">
						<image src="@/static/address.png"></image>
						<text>已定位到</text>
						<text class="u-m-l-10">{{_city}},{{address}}</text>
					</view>
					<view class="m-box-cell">
						<view class="m-box-cell-left" @click="to_link('/pages/addressList/addressList')">
							<text class="m-font1 u-line-1">{{vuexCity || '我的位置'}}</text>
						</view>
						<view class="m-box-cell-line"></view>
						<view class="m-box-input">
							<input type="text" v-model="keyword" placeholder="搜索位置、品牌、酒店"
								placeholder-style="font-size:28rpx;color:#ADA9A5;">
						</view>
						<view class="m-box-cell-right" @click="getLocationFun">
							<view class="u-flex-col u-row-center u-col-center">
								<image src="@/static/index/dingwei.png" style="width: 32rpx;height: 32rpx;" mode="">
								</image>
								<text class="m-font3 u-m-t-8">{{loading ? '定位中' : '我的位置'}}</text>
							</view>
						</view>
					</view>
					<view class="m-box-cell" v-if="getHotelType != 3" @click="to_link('/pages/selectDate/selectDate?order_sup='+getHotelType)">
						<view class="u-flex-col">
							<text class="m-font2">入住</text>
							<view class="u-flex">
								<text class="m-font4">{{sliceDate(vuexStartDateObj.dateStr)}}</text>
								<text
									class="m-font2 u-m-l-10">{{vuexStartDateObj.recent == '' ? vuexStartDateObj.week : vuexStartDateObj.recent}}</text>
							</view>
						</view>
							<view class="m-box-text">
								<text>至</text>
							</view>
							<view class="u-flex-col">
								<text class="m-font2">离店</text>
								<view class="u-flex">
									<text class="m-font4">{{sliceDate(vuexEndDateObj.dateStr)}}</text>
									<text
										class="m-font2 u-m-l-10">{{vuexEndDateObj.recent == '' ? vuexEndDateObj.week : vuexEndDateObj.recent}}</text>
								</view>
							</view>
							<view class="u-flex u-flex-1 u-row-right u-m-t-20">
								<text class="m-font2" style="color: #33302D;">共计{{vuexDayCount}}晚</text>
							</view>
					</view>
					<view v-else class="m-box-cell" @click="to_link('/pages/selectDate/selectDate?order_sup='+getHotelType)">
						<view class="u-flex-col">
							<view class="u-flex">
								<text class="m-font4">{{get_date('MM月DD日',vuexStartDateObj.dateStr + ' 00:00:00')}}</text>
								<text
									class="m-font2 u-m-l-10">{{vuexStartDateObj.recent == '' ? vuexStartDateObj.week : vuexStartDateObj.recent}}</text>
							</view>
						</view>
					</view>
					<view class="m-box-cell" v-if="current == 1" @click="openBrandFun">
						<view class="m-box-font">
							<text v-if="selectHour.length > 0">{{selectHour}}</text>
							<text style="color: #ADA9A5;" v-else>时段筛选</text>
						</view>
					</view>
					<view class="m-btn" @click="getListHotelFun">
						<text>查询</text>
					</view>
				</view>
			</view>
		</view>

		<view class="m-tab-view" v-if="brandList.length <= 4">
			<block v-for="(item,index) in brandList">
				<view class="m-tab-item" @click="selectBrandLinkFun(item)">
					<view class="m-tab-image">
						<image :src="item.originalPic" mode="aspectFill"></image>
					</view>
					<view class="m-tab-box u-m-t-10 u-line-1">
						<text>{{item.title}}</text>
					</view>
				</view>
			</block>
		</view>
		<view v-else class="m-tab-view__swiper">
			<swiper  :autoplay="true" :circular="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(val,key) in brandSwiperList" :key="key">
					<view class="m-tab-view" >
						<block v-for="(item,index) in val">
							<view class="m-tab-item m-tab-item2" @click="selectBrandLinkFun(item)">
								<view class="m-tab-image">
									<image :src="item.originalPic" mode="aspectFill"></image>
								</view>
								<view class="m-tab-box u-m-t-10 u-line-1">
									<text>{{item.title}}</text>
								</view>
							</view>
						</block>
					</view>
				</swiper-item>
			</swiper>
		</view>
		

		<view class="m-title">
			<text>优惠活动</text>
		</view>
		<view class="m-active">
			<view class="m-active-left" @click="toSpecialFun">
				<view class="m-active-title">
					<text>天天特惠</text>
				</view>
				<view class="m-active-subtitle">
					<text>限时活动 先到先得</text>
				</view>
				<view class="m-active-btn">
					<text>立即查看</text>
				</view>
			</view>
			<view class="m-active-right">
				<view class="m-active-top" @click="to_switch('/pages/shop/shop')">
					<view class="m-active-title">
						<text>积分兑换</text>
					</view>
					<!-- <view class="m-active-subtitle" style="color: transparent;">
						<text>新用户 首单优惠</text>
					</view> -->
					<view class="m-active-btn">
						<text>立即兑换</text>
					</view>
				</view>
				<view class="m-active-bottom" @click="toTejiaFun">
					<view class="m-active-title">
						<text>今夜特价</text>
					</view>
					<!-- <view class="m-active-subtitle" style="color: transparent;">
						<text>超级神券 超会省钱</text>
					</view> -->
					<view class="m-active-time" v-if="todaytime > 0 && todayStatus == 20">
						<view class="">
							<u-count-down @end="timeEndFun" :timestamp="todaytime" color="#fff" separator-color="#DE2C38" font-size="22" bg-color="#DE2C38"></u-count-down>
						</view>
						<view class="">
							<text>即将开启</text>
						</view>
					</view>
					<view class="m-active-btn" v-else>
						<text>立即预定</text>
					</view>
				</view>
			</view>
		</view>


		<view class="m-title" v-if="hotelList.length > 0">
			<text>热销·推荐酒店</text>
		</view>
		<view class="m-title" style="color: transparent;" v-else>
			<text>热销·推荐酒店</text>
		</view>
		<view class="m-list">
			<view class="m-item" v-for="(item,index) in hotelList" :key="index" @click="toDetail(item.id)">
				<view class="m-item-image">
					<view class="m-item-tip">
						<text>推荐</text>
					</view>
					<image :src="item.img" mode="aspectFill"></image>
					<view class="m-item-image__bottom">
						<view class="m-item-image__left">
							<image src="@/static/index/icon-address.png" mode=""></image>
							<text>{{item.third_data.CityName}}·{{item.third_data.WeMapDistrict}}</text>
						</view>
						<view class="m-item-image__right">
							<text>{{item.star}}</text>
						</view>
					</view>
				</view>
				<view class="m-item-title u-line-2">
					<text>{{item.title}}</text>
				</view>
				<view class="m-item-tags">
					<!-- <text>{{getTipComputed(item)}}</text> -->
					<block v-for="(val,key) in item.landmark">
					<view class="m-item-tag__item" v-if=" val.title.indexOf(item.third_data.WeMapDistrict) == -1" :key="key">
						<image v-if="val.originalPic" :src="val.originalPic" mode=""></image>
						<text>{{val.title}}</text>
					</view>
					</block>
				</view>
				<view class="m-item-bottom">
					<view class="m-item-bottom__left">
						<text class="m-item-price">{{item.lowest_prices}}</text>
					</view>
					<view class="m-item-bottom__right">
						<text>{{item.order_num}}+订</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="m-quanyi" @click="to_link('/pages2/hotel-member/hotel-member')">
			<image src="@/static/quanyi.png" mode=""></image>
		</view>

		<u-popup v-model="show" mode="bottom" borderRadius="30" :closeable="true">
			<view class="m-popup">
				<view class="m-popup-title">
					<text>时段筛选</text>
				</view>
				<view class="m-popup-scroll">
					<scroll-view :scroll-y="true">
						<view class="m-poup-body">
							<view class="m-hour-list">
								<view class="m-hour-item" @click="selectHourFun(item)" v-for="(item,index) in hourTypesList" :key="index">
									<view class="m-hour-item__left">
										<text>{{item}}</text>
									</view>
									<view class="">
										<m-radio :disabled="true" :value="!!(selectHour.indexOf(item) > -1)"></m-radio>
									</view>
								</view>
							</view>
							<!-- <view class="slider-title">
								<text>价格</text>
								<text class="slider-title-font">{{sliderPriceComputed}}</text>
							</view>
							<sliderrange
							  :value="rangeValue"
							  :min="rangeMin"
							  :max="rangeMax"
							  :step="50"
							  :bar-height="3"
							  :block-size="20"
							  :height="40"
							  background-color="#E6E2DE"
							  active-color="#D3A358"
							  :format="format"
							  :decorationVisible="true"
							  @change="handleRangeChange"
							></sliderrange>
							<view class="price-list">
								<view class="price-item" :class="{'price-active':index == 0}" v-for="(item,index) in 6" :key="index">
									<text>￥200以下</text>
								</view>
							</view>
							 -->
							<!-- <view class="slider-title">
								<text>品牌</text>
							</view> -->
							<!-- <view class="brand-list">
								<view class="brand-item" @click="selectBrandFun(item)"
									:class="{'brand-active': brandInfoTem && brandInfoTem.id == item.id}"
									v-for="(item,index) in brandList" :key="index">
									<image :src="item.originalPic" mode="aspectFill"></image>
									<view class="">
										{{item.title}}
									</view>
								</view>
							</view> -->
						</view>
					</scroll-view>
				</view>
				<view class="m-popup-bottom">
					<view class="m-popup-bottom__left" @click="resetSelectBrandFun">
						<text>重置</text>
					</view>
					<view class="m-popup-bottom__right" @click="confirmSelectBrandFun">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>
		<calendar ref="calendar" mode="2" :is-show="dateShow" theme-color="#fa3534" @callback="getDate" />
		<m-login></m-login>
	</view>
</template>

<script>
	import {
		sliceDate,
		get_timestamp,
		get_date
	} from "@/common/function/tools.js"
	import {
		to_link,to_switch
	} from "@/common/function/system_fun.js";
	import {
		toLink
	} from '@/common/function/wx_login.js';
	import {
		wx_login,
		getBannerListFun
	} from "@/common/function/api_fun.js"
	import {
		getHotelList
	} from '@/common/function/api_fun.js'
	import _hook from "@/common/libs/hook"
	var QQMapWX = require('../../common/libs/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	const key = 'XPXBZ-6PY3K-GGCJK-AOEYP-JM575-5FBIP'
	export default {
		data() {
			return {
				loading: true,
				dateShow: false,
				location: false,
				address:'',
				bannerList: [],
				tabList: [{
					name: '国内酒店',
					houseType: 2
				}, {
					name: '时租房',
					houseType: 3
				}, {
					name: '民宿',
					houseType: 1
				}],
				current: 0,

				brandList: [],
				brandSwiperList:[],
				brandInfoTem:null,
				
				selectHour:[],//选中的时间
				hourTypesList:[],

				show: false,
				rangeValue: [0, 1050],
				rangeMin: 0,
				rangeMax: 1050,
				keyword: '',
				_city:'',
				
				areaList:[],
				channel_id:-99,
				hotelList: [],
				page: 1,
				limit: 10,
				loadStatus: 'loading',
				
				todaytime:0,
				todayStatus:20,

			}
		},
		computed: {
			getBoxViewHeight(){
				if(this.current == 1) return !this.address ? '400rpx' : '492rpx'
				return !this.address ? '286rpx' : '378rpx'
			},
			getBoxHeight(){
				if(this.current == 1) return !this.address ? '400rpx' : '692rpx'
				return !this.address ? '600rpx' : '578rpx'
			},
			getHotelType(){
				return this.tabList[this.current].houseType
			},
			getAddressComputed() {
				return (address) => {
					return address.slice(2)
				}
			},
			//slider价格区间显示
			sliderPriceComputed() {
				let [min, max] = this.rangeValue
				if (min == 0 && max == this.rangeMax) {
					return ''
				}
				if (min == 0) {
					return `￥${max}以下`
				}
				if (max == this.rangeMax) {
					return `￥${min}以上`
				}
				return `￥${min}-${max}`
			},
			getTipComputed() {
				return (item) => {
					if (!item.landmark) return ''
					return item.landmark.map(val => val.title).join(' | ')
				}
			},
		},
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		onLoad(options) {
			if(options.scene){
				var sceneParams = decodeURIComponent(options.scene);
				sceneParams = sceneParams.split('&');
				if (sceneParams.length) {
					sceneParams.forEach(item => {
						uni.setStorageSync(item.split('=')[0], item.split('=')[1]);
					});
				}
			}
			wx_login((res) => {
				console.log(res, '111111');
				this.$u.vuex('vuex_user_id', res.id)
				_hook.fire('wxLoginFun');
			})


			let time = get_timestamp()
			let timestamp1 = time * 1000
			let timestamp2 = (time + 24 * 3600) * 1000
			this.$u.vuex('vuexStartDateObj', this.$refs.calendar.dateFormat(timestamp1))
			this.$u.vuex('vuexEndDateObj', this.$refs.calendar.dateFormat(timestamp2))

			qqmapsdk = new QQMapWX({
				key: key
			});
			//监听重置
			uni.$on('resetListFun', (type='area') => {
				this.list = []
				this.page = 1
				// console.log(type);
				if(type == 'area'){
					// this._city = this.vuexCity
					let item = this.areaList.find(item => item.title.indexOf(this.vuexCity) > -1)
					this.channel_id = item?item.id: -99
					// this.getArea()
				}
				this.getHotelList()
				
			})
			this.getLocationFun()
			// uni.getLocation({
			// 	success: (res) => {
			// 		console.log(res);
			// 		this.location = false
			// 		this.$u.vuex('vuexLocation', {
			// 			lat: res.latitude,
			// 			lng: res.longitude
			// 		})
			// 		this.getArea()
			// 	},
			// 	fail: (err) => {
			// 		console.log(err);
			// 		this.location = false
			// 		this.$u.vuex('vuexLocation', {
			// 			lat: 31.233940,
			// 			lng: 121.475830
			// 		})
			// 		this.getArea()
			// 	}
			// })

			setTimeout(() => {
				this.loading = false
			}, 1500)

			this.getBrandFun()
			this.getIndexFun()
			this.initTime()
			this.getIndexConfigFun()

		},
		onShow() {

		},
		onUnload() {
			// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			// chooseLocation.setLocation(null);
		},
		methods: {
			sliceDate,
			toLink,
			get_date,
			to_switch,
			getIndexConfigFun(){
				this.$http.getJson('index_config').then(res=>{
					if(res.code == 1){
						this.hourTypesList = res.data.hourTypes || []
					}
				})
			},
			selectHourFun(item){
				let index = this.selectHour.indexOf(item)
				if(index > -1){
					this.selectHour.splice(index,1)
				}else{
					this.selectHour.push(item)
				}
			},
			initTime(){
				let nowtime = get_timestamp()
				let next = get_timestamp(get_date('YYYY-MM-DD') + ' 16:00:00')
				this.todaytime = next - nowtime
				if(this.todaytime <= 0){
					this.todayStatus = 10
				}else{
					this.todayStatus = 20
				}
			},
			toTejiaFun(){				
				// this.toCitySelectedFun('/pages2/tejia/tejia')
				if(this.todaytime > 0 || this.todayStatus == 20){
					this.$m.msg('未到开启时间')
					return ;
				}
				this.toCitySelectedFun('/pages2/tejia/tejia')
			},
			timeEndFun(){
				this.todayStatus = 10
			},
			toCitySelectedFun(url){
				if(this.vuexCity){
					this.to_link(url)
				}else{
					uni.showModal({
						title:'定位失败',
						content:'请手动选择城市，为您查询酒店',
						confirmColor:'#D3A358',
						confirmText:'选择城市',
						success:(e)=> {
							if(e.confirm){
								this.to_link('/pages/addressList/addressList')
							}
						}
					})
				}
			},

			selectBrandLinkFun(item) {
				this.$u.vuex('brandInfo', item)
				this.getListHotelFun()
			},
			getListHotelFun() {
				let order_sup = this.tabList[this.current].houseType
				let str = ''
				if(this.current == 1){
					str += '&hourtype='+this.selectHour.join(',')
				}
				this.toCitySelectedFun('/pages/list/list?keyword=' + this.keyword + '&order_sup=' + order_sup + str)
			},
			toSpecialFun(){
				this.toCitySelectedFun('/pages/list/special_list')
			},
			getIndexFun() {
				this.$http.getJson('index_index').then(res => {
					if (res.code == 1) {
						this.bannerList = res.data.banners || []
					}
				})
			},
			getBrandFun() {
				this.$http.getJson('hotal_brand').then(res => {
					if (res.code == 1) {
						// this.brandList = res.data || []
						let list = res.data || []
						// list = list.concat(list)
						this.brandList = list
						if(list.length > 4){
							let arr = []
							let i = 0
							list.forEach((item,index)=>{
								if(!arr[i]){
									arr.push([])
								}
								if(arr[i].length < 4){
									arr[i].push(item)
								}
								if(arr[i].length == 4){
									i+= 1
								}
							})
							this.brandSwiperList = arr
						}
						
					}
				})
			},
			
			openBrandFun(){
				// this.brandInfoTem = JSON.parse(JSON.stringify(this.brandInfo))
				this.show = true
			},
			selectBrandFun(item) {
				this.brandInfoTem = item
			},
			resetSelectBrandFun(){
				this.selectHour = []
				// this.brandInfoTem = {}
				// this.$u.vuex('brandInfo', {}) 
				this.show = false
			},
			confirmSelectBrandFun(){
				// this.$u.vuex('brandInfo', JSON.parse(JSON.stringify(this.brandInfoTem)))
				this.show = false
			},

			//价格区间
			handleRangeChange(e) {
				this.rangeValue = e
			},
			format(val) {
				return '￥' + (val > 1000 ? '1000+' : val)
			},

			tabClickFun(item, index) {
				this.current = index
			},
			//跳转到详情页
			toDetail(id) {
				let order_sup = this.tabList[this.current].houseType
				wx.navigateTo({
					url: '/pages/list/detail?id=' + id + '&startDate=' + this.vuexStartDateObj.dateStr +
						'&endDate=' + this.vuexEndDateObj.dateStr+'&order_sup='+order_sup,
				})
			},
			getHotelList() {
				let {
					lng,
					lat
				} = this.vuexLocation;

				let params = {
					longitude: lng,
					latitude: lat,
					page: 1,
					pagenum: 8,
					start_time: this.vuexStartDateObj.dateStr,
					end_time: this.vuexEndDateObj.dateStr,
					channel_id:this.channel_id || -99
				}
				this.loadStatus = 'loading'
				this.$http.getJson('hotal_searchList', params).then(res => {
					if (res.code == 1) {
						this.hotelList = res.data.list
					}
				})
			},

			// tab切换
			change(e) {
				this.current = e
				let data = this.tabList[e]
				console.log(data)
				this.$u.vuex('houseType', data['houseType'])
				uni.$emit('resetListFun')
			},
			getDate(e) {
				console.log(e);
				this.$u.vuex('vuexStartDateObj', e.startStr)
				this.$u.vuex('vuexEndDateObj', e.endStr)
				this.$u.vuex('vuexDayCount', e.dayCount)
				this.dateShow = false
			},
			getTodayDate() {
				var dateInstance = new Date();
				dateInstance.setTime(dateInstance.getTime());
				let d = dateInstance.getDate();
				d = d < 10 ? '0' + d : d;
				return dateInstance.getFullYear() + "-" + (dateInstance.getMonth() + 1) + "-" + d;
			},
			getLocationFun(){
				this.location = true
				qqmapsdk.reverseGeocoder({
					success: (e) => {
						console.log(e);
						if (e.status === 0) {
							let d = e.result.address_reference
							let c = 0 
							console.log(d);
							for(let i in d){
								if(d[i].title){
									this.address = d[i].title
									break;
								}
							}
							this.$u.vuex('vuexLocation', e.result.location)
							this.location = false
							this._city = e.result.ad_info.city.replace('市','')
							this.$u.vuex('vuexCity', this._city)
							this.getArea()
						}
					},
					fail:(e)=>{
						console.log(e);
						uni.showModal({
							title:'定位失败',
							content:'请手动选择城市，为您查询酒店',
							confirmColor:'#D3A358',
							confirmText:'选择城市',
							success:(e)=> {
								if(e.confirm){
									this.to_link('/pages/addressList/addressList')
								}
							}
						})
						this.location = false
						// this.$u.vuex('vuexCity', '上海')
						this.$u.vuex('vuexLocation', {lat: 31.233940,lng: 121.475830})
						// this.getHotelList();
					}
				})
			},
			getArea() {
				this.$http.getJson('hotal_channel').then(res => {
					if (res.code == 1) {
						let list = res.data || []
						if (list.length > 0) {
							let city = this._city
							let item = res.data.find(item => item.title.indexOf(city) > -1)
							this.areaList = list
							this.channel_id = item ? item.id : -99
							this.getHotelList(item)
						}
						// this.$u.vuex('vuexLocation', {lat: 31.233940,lng: 121.475830})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.m-font1 {
		font-size: 30rpx;
		color: #222;
		font-weight: 800;
	}

	.m-font2 {
		font-size: 24rpx;
		color: #9B958F;
		line-height: 33rpx;
	}

	.m-font3 {
		color: #D3A358;
		font-size: 22rpx;
	}

	.m-font4 {
		font-size: 40rpx;
		color: #33302D;
	}

	.m-box-view {
		position: relative;
		width: 690rpx;
		height: 286rpx;
		margin-left: 25rpx;

		.m-box {
			display: flex;
			flex-direction: column;
			// background: #fff;
			border-radius: 10rpx;
			position: absolute;
			width: 690rpx;
			// height: 600rpx;
			height: 486rpx; 
			top: -200rpx;

			// box-shadow: 0 10rpx 10rpx rgba($color: #000000, $alpha: 0.1);
			// padding: 25rpx;
			.m-tab {
				display: flex;
				align-items: center;
				height: 80rpx;
				background: rgba(#000, 0.1);
				backdrop-filter: blur(40rpx);
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;

				.m-tab-item {
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					flex: 1;
					height: 100%;
					font-size: 32rpx;
					color: #fff;
				}

				.m-tab-active0 {
					position: relative;

					&::after {
						content: '国内酒店';
						display: flex;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						width: 250rpx;
						height: 88rpx;
						position: absolute;
						bottom: 0;
						left: 0;
						background-image: url("@/static/index/tab-left.png");
						background-size: 100% 100%;
						color: #33302D;
						font-size: 32rpx;
						padding-top: 8rpx;
					}
				}

				.m-tab-active1 {
					position: relative;

					&::after {
						content: '时租房';
						display: flex;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						width: 270rpx;
						height: 88rpx;
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						background-image: url("@/static/index/tab-center.png");
						background-size: 100% 100%;
						color: #33302D;
						font-size: 32rpx;
						padding-top: 8rpx;
					}
				}

				.m-tab-active2 {
					position: relative;

					&::after {
						content: '民宿';
						display: flex;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						width: 250rpx;
						height: 88rpx;
						position: absolute;
						bottom: 0;
						right: 0;
						background-image: url("@/static/index/tab-right.png");
						background-size: 100% 100%;
						color: #33302D;
						font-size: 32rpx;
						padding-top: 8rpx;
					}
				}
			}

			.m-box-body {
				background: #fff;
				box-shadow: 0px 10rpx 20rpx 1rpx rgba(211, 163, 88, 0.16);
				border-radius: 0px 0px 20rpx 20rpx;
				padding: 1px 40rpx 30rpx 40rpx;
			}
			
			.m-box-tip{
				display: flex;
				align-items: center;
				background: #F6F6F6;
				height: 72rpx;
				padding: 0 20rpx;
				border-radius: 8rpx;
				font-size: 26rpx;
				color: #734C20;
				margin-top: 20rpx;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-right: 5rpx;
				}
			}

			.m-box-cell {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 8rpx;
				min-height: 114rpx;
				border-bottom: 1px solid #E6E2DE;

				.m-box-cell-left {
					max-width: 150rpx;
				}

				.m-box-cell-line {
					width: 1px;
					height: 40rpx;
					background-color: #D3CEC9;
					margin: 0 30rpx;
				}

				.m-box-input {
					flex: 1;
					height: 100%;

					input {
						width: 100%;
						height: 100%;
					}
				}

				.m-box-text {
					font-size: 24rpx;
					color: #33302D;
					line-height: 33rpx;
					padding-top: 32rpx;
					margin-left: 40rpx;
					margin-right: 40rpx;
				}

				.m-box-font {
					font-size: 28rpx;
					color: #000;
				}
			}

			.m-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 90rpx;
				border-radius: 20rpx;
				color: #fff;
				font-size: 36rpx;
				background: linear-gradient(90deg, #DBB579 0%, #D3A358 100%);
				margin-top: 30rpx;
				letter-spacing: 15rpx;
				font-weight: 600;
			}
		}
	}

	.m-tab-view__swiper{
		height: 170rpx;
		swiper{
			height: 100%;
			width: 100%;
		}
	}
	.m-tab-view {
		display: flex;
		align-items: center;
		padding: 10rpx 30rpx 0;

		.m-tab-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex: 1;

			.m-tab-image {
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 12rpx 1rpx rgba(211, 163, 88, 0.08);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				overflow: hidden;
				width: 90rpx;

				image {
					width: 90rpx;
					height: 90rpx;
				}
			}

			.m-tab-box {
				width: 130rpx;
				// height: 142rpx;
				text-align: center;
				font-size: 24rpx;
				color: #33302D;
			}

			// &:nth-child(1){
			// 	.m-tab-box{
			// 		background-image: url("@/static/index/home-icon-tab1.png");
			// 		background-size: 100% 100%;
			// 	}
			// }
			// &:nth-child(2){
			// 	.m-tab-box{
			// 		background-image: url("@/static/index/home-icon-tab2.png");
			// 		background-size: 100% 100%;
			// 	}
			// }
			// &:nth-child(3){
			// 	.m-tab-box{
			// 		background-image: url("@/static/index/home-icon-tab3.png");
			// 		background-size: 100% 100%;
			// 	}
			// }
			// &:nth-child(4){
			// 	.m-tab-box{
			// 		background-image: url("@/static/index/home-icon-tab4.png");
			// 		background-size: 100% 100%;
			// 	}
			// }
		}
		.m-tab-item2{
			flex: initial;
			width: 25%;
		}
	}

	.m-title {
		padding: 60rpx 30rpx 24rpx 30rpx;
		font-size: 36rpx;
		color: #33302D;
		font-weight: 600;
	}

	.m-active {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;

		.m-active-left {
			width: 335rpx;
			height: 380rpx;
			background-image: url("@/static/index/img_tejiafang.png");
			background-size: 100% 100%;
		}

		.m-active-right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			padding-left: 20rpx;

			.m-active-top {
				width: 335rpx;
				height: 180rpx;
				background-image: url("@/static/index/img_xinrenquan.png");
				background-size: 100% 100%;
			}

			.m-active-bottom {
				width: 335rpx;
				height: 180rpx;
				background-image: url("@/static/index/img_manjianhuodong.png");
				background-size: 100% 100%;
			}
		}

		.m-active-title {
			padding-top: 24rpx;
			padding-left: 30rpx;
			font-size: 30rpx;
			color: #33302D;
			line-height: 42rpx;
			font-weight: 600;
		}

		.m-active-subtitle {
			font-size: 24rpx;
			color: #9B958F;
			line-height: 33rpx;
			margin-left: 30rpx;
		}

		.m-active-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 96rpx;
			height: 34rpx;
			border-radius: 30rpx;
			border: 1px solid #E6E2DE;
			font-size: 18rpx;
			color: #D3A358;
			margin-left: 30rpx;
			margin-top: 45rpx;
		}
		.m-active-time{
			padding-left: 30rpx;
			font-size: 26rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}

	.m-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 30rpx;

		.m-item {
			width: 335rpx;
			background: #fff;
			border-radius: 30rpx;
			margin-bottom: 20rpx;

			.m-item-image {
				position: relative;
				width: 335rpx;
				height: 335rpx;

				image {
					width: 100%;
					height: 100%;
					border-top-left-radius: 30rpx;
					border-top-right-radius: 30rpx;
				}

				.m-item-tip {
					position: absolute;
					top: 0;
					left: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80rpx;
					height: 40rpx;
					background: #D3A358;
					border-top-left-radius: 30rpx;
					border-bottom-right-radius: 30rpx;
					font-size: 24rpx;
					color: #fff;
				}

				.m-item-image__bottom {
					position: absolute;
					left: 0;
					bottom: 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 335rpx;
					height: 68rpx;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);

					.m-item-image__left {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #fff;
						line-height: 33rpx;
						padding-left: 20rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.m-item-image__right {
						font-size: 48rpx;
						color: #E4C89A;
						padding-right: 20rpx;
						&::after{
							content: '分';
							font-size: 26rpx;
						}
					}
				}
			}

			.m-item-title {
				margin-top: 16rpx;
				height: 84rpx;
				line-height: 42rpx;
				font-size: 30rpx;
				color: #33302D;
				font-weight: 600;
				padding-left: 16rpx;
				padding-right: 16rpx;
			}

			.m-item-tags {
				display: flex;
				flex-wrap: wrap;
				font-size: 24rpx;
				color: #9B958F;
				line-height: 33rpx;
				padding: 12rpx 16rpx 0;
				.m-item-tag__item{
					display: flex;
					align-items: center;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					image{
						flex-shrink: 0;
						width: 33rpx;
						height: 33rpx;
						margin-right: 4rpx;
					}
				}
			}

			.m-item-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0rpx 16rpx 30rpx 16rpx;

				.m-item-bottom__left {
					.m-item-price {
						font-size: 40rpx;
						color: #DE2C38;
						font-weight: 500;

						&::before {
							content: '￥';
							font-size: 20rpx;
						}

						&::after {
							content: '起';
							color: #76706B;
							font-size: 20rpx;
							font-weight: 400;
						}
					}
				}

				.m-item-bottom__right {
					font-size: 24rpx;
					color: #D3A358;
				}
			}
		}
	}

	.m-popup {
		display: flex;
		flex-direction: column;
		width: 750rpx;

		.m-popup-title {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FBF6EE;
			height: 108rpx;
			font-size: 32rpx;
			color: #33302D;
			font-weight: 600;
		}

		.m-popup-scroll {
			height: 800rpx;
			width: 100%;

			scroll-view {
				width: 100%;
				height: 100%;
			}

			.m-poup-body {
				padding: 25rpx;
				.m-hour-list{
					.m-hour-item{
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 80rpx;
						border-bottom: 1px solid #eee;
						font-size: 28rpx;
						color: #666;
					}
				}

				.slider-title {
					font-size: 28rpx;
					color: #33302D;
					font-weight: 600;
					padding-top: 30rpx;
					padding-bottom: 30rpx;

					.slider-title-font {
						font-size: 28rpx;
						color: #DE2C38;
						margin-left: 12rpx;
					}
				}

				.price-list {
					display: flex;
					flex-wrap: wrap;
					padding-top: 20rpx;

					.price-item {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 220rpx;
						height: 72rpx;
						background: #F6F6F6;
						font-size: 26rpx;
						color: #666;
						font-weight: 600;
						margin-right: 20rpx;
						margin-bottom: 20rpx;

						&:nth-child(3n) {
							margin-right: 0;
						}
					}

					.price-active {
						background: rgba(#D3A358, 0.2);
						color: #D3A358;
					}
				}

				.brand-list {
					display: flex;
					flex-wrap: wrap;
					padding-top: 20rpx;

					.brand-item {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 220rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						border: 1rpx solid #E6E2DE;
						font-size: 26rpx;
						color: #76706B;
						text-align: center;
						padding: 20rpx 0;
						margin-right: 20rpx;
						margin-bottom: 20rpx;

						image {
							width: 80rpx;
							height: 80rpx;
							margin-bottom: 12rpx;
						}

						&:nth-child(3n) {
							margin-right: 0;
						}
					}

					.brand-active {
						border-color: #D3A358;
					}
				}
			}
		}

		.m-popup-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(0, 0, 0, 0.06);

			.m-popup-bottom__left {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 186rpx;
				height: 88rpx;
				font-size: 28rpx;
				color: #33302D;
			}

			.m-popup-bottom__right {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 540rpx;
				height: 88rpx;
				background: #D3A358;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-size: 32rpx;
				color: #fff;
				margin-right: 24rpx;
			}
		}
	}
	
	.m-quanyi{
		position: fixed;
		width: 147rpx;
		height: 147rpx;
		right: 0;
		bottom: 60rpx;
		z-index: 10;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>